<template>
  <section class='f-wechat'>
    <section class="f-title g-flex-ct">
      <img class="f-img1" src="@/assets/icons/jhh_weixin_head_icon.png" alt="">
      <div>
        <p>{{shopForm.shopName}}</p>
        <p class="f-mt-05" style="font-size: 12px;color: #666666;">微信号：{{shopForm.wechatAccount}}</p>
      </div>
    </section>

    <section class="f-qrcode">
      <img style="width:200px;height:200px" :src="shopForm.wechatQr" alt="">
    </section>

    <section class="f-center">
      <p class="f-text1">请使用微信APP扫码添加店铺微信客服</p>
    </section>

  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import QrcodeVue from 'qrcode.vue'
import api from '../api'

export default {
  components: { QrcodeVue },

  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      shopForm: {}
    })

    onMounted(() => {
      store.commit("setNavBar", {
        title: '微信客服',
        show: true,
        left: true,
        leftType: 'back',
        right: false,
        rightType: 'search',
      });

      getShopInfo()
    })

    const getShopInfo = () => {
      api.shopInfo().then(res => {
        state.shopForm = res.data
      })
    }

    return {
      ...toRefs(state)
    }
  }
}
</script>
<style lang='scss' scoped>
.f-wechat {
  padding: 34px 16px;
  .f-title {
    display: flex;
    font-size: 20px;
    font-weight: 500;
    color: #000000;
    .f-img1 {
      width: 54px;
      height: 54px;
      margin-right: 9px;
    }
  }
  .f-qrcode {
    text-align: center;
    margin-top: 50px;
  }
  .f-text1 {
    font-size: 14px;
    color: #000000;
    margin-top: 16px;
    margin-bottom: 12px;
  }
  .f-text2 {
    font-size: 12px;
    color: #666666;
  }
}
</style>